<template>
	<view class="pop-wp">
		<view class="shop-blck" @click.stop="clear"></view>
		<!-- 无规格弹框 -->
		<view class="pop-nr" v-if="info.goods.hasoption=='0'">
			<view class="title">
				<image :src="wushop.thumb" mode=""></image>
				<view>
					<view class="jiage">￥{{wushopSaleprice}}</view>
					<view class="kucun">库存：{{wushop.total}}件</view>
				</view>
			</view>
			<view class="number">
				<view>购买数量</view>
				<view class="number-right">
					<view @click="num(0)">-</view>
					<input type="number" v-model="wunumber" />
					<view @click="num(1)">＋</view>
				</view>
			</view>
			<view class="btn" v-if="btnOK" @click="success0">
				{{ok}}
			</view>
			<view class="chahao" @click="clear">
				×
			</view>
		</view>
		<!-- 有规格弹框且specs长度为1 -->
		<view class="pop-nr" v-if="info.goods.hasoption=='1'&&info.specs.length==1">
			<view class="title">
				<image :src="youshop.thumb" mode=""></image>
				<!-- <image v-if="youshop.thumb.includes('https://img13.360buyimg.com')!=-1" :src="youshop.thumb" mode=""></image> -->
				<!-- <image v-else :src="info.goods.thumb" mode=""></image> -->
				<view>
					<view class="jiage">￥{{youshopSaleprice}}</view>
					<view class="kucun">库存：{{youshop.stock}}件</view>
					<text>选择规格：{{youshop.title}}</text>
				</view>
			</view>
			<scroll-view class="xuan-guige" scroll-y="true">
				<view class="guige-chima">
					<view class="guige-chima-titlt">{{youoncetitle}}：</view>
					<view class="guige-chima-titlt-xuanze">
						<view :style="{'color':item.stock<=0&&'#999'}" :class="oncebol==index?'xuan':''"
							@click="select(index,item)" v-for="(item,index) in youshops" :key="index">{{item.title}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="number">
				<view>购买数量</view>
				<view class="number-right">
					<view @click="younum(0)">-</view>
					<input type="number" v-model="younumber" />
					<view @click="younum(1)">＋</view>
				</view>
			</view>
			<view class="btn" v-if="btnOK" @click="success1">
				{{ok}}
			</view>
			<view class="chahao" @click="clear">
				×
			</view>
		</view>

		<!-- 有规格弹框且specs长度大于1 -->
		<view class="pop-nr" v-if="info.goods.hasoption=='1'&&info.specs.length>1">
			<view class="title">
				<image :src="youshop.thumb"></image>
				<!-- <image v-if="youshop.thumb.includes('https://img13.360buyimg.com')!=-1" :src="youshop.thumb" mode=""></image>
				<image v-else :src="info.goods.thumb" mode=""></image> -->
				<view>
					<view class="jiage">￥{{youshopSaleprice}}</view>
					<view class="kucun">库存：{{youshop.stock}}件</view>
					<text>选择规格：{{youshop.title}}</text>
				</view>
			</view>
			<scroll-view class="xuan-guige" scroll-y="true">
				<view class="guige-chima" v-for="(fitem,findex) in moreshops" :key="findex">
					<view class="guige-chima-titlt">{{fitem.title}}：</view>
					<view class="guige-chima-titlt-xuanze">
						<view :class="hui[findex][index]?morebol[findex][index]?'xuan':'':'hui'"
							v-for="(item,index) in fitem.items" :key="index" @click="moreselect(findex,index)">
							{{item.title}}</view>
					</view>
				</view>
			</scroll-view>
			<view class="number">
				<view>购买数量</view>
				<view class="number-right">
					<view @click="younum(0)">-</view>
					<input type="number" v-model="younumber" />
					<view @click="younum(1)">＋</view>
				</view>
			</view>
			<view class="btn" v-if="btnOK" @click="success1">
				{{ok}}
			</view>
			<view class="chahao" @click="clear">
				×
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				wunumber: 1,
				wushop: {},
				btnOK: false,
				younumber: 1,
				youshops: [],
				youshop: {},
				youoncetitle: '',
				oncebol: 0,
				moreshops: [],
				morebol: [],
				specss: [],
				hui: [],
				youshopSaleprice: '',
				wushopSaleprice:'',
			}
		},
		props: ['ids', 'ok', 'gui', 'info'],
		mounted() {
			var that = this;
			that.oks = that.ok;
			// 无规格
			if (that.info.goods.hasoption == '0') {
				that.wushop = that.info.goods;
				that.wushopSaleprice = uni.getStorageSync('JTuanState') == '-2' ? that.wushop.salegprice : that.wushop
					.saleprice;
				that.wunumber = that.wushop.total == 0 ? 0 : 1;
				that.ok = that.wushop.total == 0 ? '已售罄' : that.oks;
			}
			// 有规格且specs为空
			if (that.info.goods.hasoption == '1') {
				if (that.info.specs.length == 1) {
					that.youshops = that.info.options;
					for (let i in that.youshops) {
						if (that.youshops[i].stock != 0) {
							that.youshop = that.youshops[i];
							that.oncebol = i;
							that.youoncetitle = that.info.specs[0].title;
							break;
						}
					}
					if (that.youoncetitle == '') {
						that.youoncetitle = that.info.specs[0].title;
						that.youshop = that.youshops[0]
					}
					that.youshopSaleprice = uni.getStorageSync('JTuanState') == '-2' ? that.youshop.salegprice : that
						.youshop.saleprice;
					that.younumber = that.youshop.stock == 0 ? 0 : 1;
					that.ok = that.youshop.stock == 0 ? '已售罄' : that.oks;
				} else {
					that.moreshops = that.info.specs;
					var selectoption = -1;
					// 以id为下标，把所在位置放入数组
					var specsArr = [];
					for (let i in that.info.specs) {
						var specsItem = that.info.specs[i].items;
						that.specss.push(that.info.specs[i].items[0].id);
						that.morebol.push([]);
						that.hui.push([]);
						for (let m in specsItem) {
							specsArr[specsItem[m].id] = [i, m];
							that.morebol[i].push(0);
							that.hui[i].push(1);
						}
					}
					for (let i in that.info.options) {
						if (that.info.options[i].stock > 0 && selectoption == -1) {
							var arr = that.info.options[i].specs.split('_');
							selectoption = i;
							that.youshop = that.info.options[i];
							for (let y in arr) {
								var specsArrIndex = specsArr[arr[y]]
								that.$set(that.morebol[specsArrIndex[0]], specsArrIndex[1], 1);
								if (that.morebol[specsArrIndex[0]][specsArrIndex[1]] == 1 && that.moreshops[specsArrIndex[
										0]].items[specsArrIndex[1]].thumb) {
											// console.log( that.moreshops[specsArrIndex[0]].items[specsArrIndex[1]].thumb)
									that.youshop.thumb = that.moreshops[specsArrIndex[0]].items[specsArrIndex[1]].thumb;
								}
							}
							break;
						}
					}
					if (selectoption == -1) {
						that.youshop = that.info.options[0];
						that.ok = '已售罄';
					}
					that.youshopSaleprice = uni.getStorageSync('JTuanState') == '-2' ? that.youshop.salegprice : that
						.youshop.saleprice;
				}

			}
			that.btnOK = true;
		},
		updated() {
			if (this.ok != '已售罄') {
				this.oks = this.ok;
			}
			if (this.youshop.stock <= 0) {
				this.ok = '已售罄';
			} else {
				this.ok = this.oks;
			}
		},
		methods: {
			// 关闭弹出框
			clear() {
				this.$emit('cler');
			},
			// end
			// 一级选项选择
			select(e, item) {
				if (item.stock <= 0) {
					return
				};
				this.oncebol = e;
				this.youshop = this.youshops[e];
				for (var i in this.info.specs[0].items) {
					if (this.info.specs[0].items[i].id == this.youshop.specs && this.info.specs[0].items[i].thumb != '') {
						this.youshop.thumb = this.info.specs[0].items[i].thumb;
						break;
					}else{
						this.youshop.thumb = this.info.goods.thumb;
					}
				}
				this.youshopSaleprice = uni.getStorageSync('JTuanState') == '-2' ? this.youshop.salegprice : this.youshop
					.saleprice;
				this.younumber = this.youshop.stock == 0 ? 0 : 1;
			},
			// 多级选项选择
			moreselect(e, m) {
				var that = this;
				if (!that.hui[e][m]) {
					return
				};
				var specsso = this.specss.concat([]);
				for (let i = 0; i < this.info.specs.length; i++) {
					if (i != e) {
						for (let k in this.info.specs[i].items) {
							specsso[i] = this.info.specs[i].items[k].id;
							specsso[e] = this.info.specs[e].items[m].id;
							var hspecs = specsso.sort((a,b)=>a-b).join('_');
							this.$set(this.hui[i], k, 0);
							// this.$set(this.hui[i],k,0);
							for (let n in this.info.options) {
								var opSpecs = this.info.options[n].specs.split('_').sort((a,b)=>a-b).join('_')
								if (hspecs == opSpecs && this.info.options[n].stock > 0) {
									that.$set(that.hui[i], k, 1);
								}
							}
						}
					}
				}
				for (let i in this.morebol[e]) {
					this.$set(this.morebol[e], i, i == m ? 1 : 0);
				};
				this.specss[e] = this.info.specs[e].items[m].id;
				var specs = this.specss.concat([]);
				specs = specs.sort((a, b) => {
					return a - b
				}).join('_');
				for (let i in this.info.options) {
					var opSpecs = this.info.options[i].specs.split('_').sort((a,b)=>a-b).join('_')
					if (specs == opSpecs) {
						var cunyoushop = this.info.options[i];
						if (this.info.specs[e].items[m].thumb != '') {
							cunyoushop.thumb = this.info.specs[e].items[m].thumb;
						} else {
							cunyoushop.thumb = this.youshop.thumb;
						}
						this.youshop = cunyoushop;
						that.ok = this.youshop.stock <= 0 ? '已售罄' : that.oks;
						break;
					}
				}
				this.youshopSaleprice = uni.getStorageSync('JTuanState') == '-2' ? this.youshop.salegprice : this.youshop
					.saleprice;

			},
			// 无规格加减数量
			num(e) {
				if (e == 0) {
					this.wunumber = 1;
					this.wunumber = this.wunumber <= 1 ? 1 : this.wunumber;
					if (this.wushop.total == 0) {
						this.wunumber = 0;
					}
				} else {
					this.wunumber += 1;
					this.wunumber = this.wunumber >= this.wushop.total ? this.wushop.total : this.wunumber;
					if (this.wushop.stock == 0) {
						this.wunumber = 0;
					}
				}
			},
			// 有规格加减数量
			younum(e) {
				if (e == 0) {
					this.younumber = 1;
					this.younumber = this.younumber <= 1 ? 1 : this.younumber;
					if (this.youshop.total == 0) {
						this.younumber = 0;
					}
				} else {
					this.younumber += 1;
					this.younumber = this.younumber >= this.youshop.total ? this.youshop.total : this.younumber;
					if (this.wushop.stock == 0) {
						this.youshop = 0;
					}
				}
			},
			// end
			// 无规格提交
			success0() {
				var that = this;
				wusuccess(that);
			},
			// 有规格提交
			success1() {
				var that = this;
				yousuccess(that);
			}
		},

	}
	// 无规格提交
	function wusuccess(that) {
		that.ok = that.wushop.total <= 0 ? '已售罄' : that.oks;
		if (that.ok == '立即购买') {
			if (that.wunumber - 0 > that.wushop.total) {
				uni.showModal({
					content: '您最多购买' + that.wushop.total + '件',
					showCancel: false
				})
			} else if (that.wunumber <= 0) {
				uni.showModal({
					content: '您最少购买1件',
					showCancel: false
				})
			} else {
				// try {
				// 	var orderID = uni.getStorageSync('JTuanState');
				// 	if (orderID == '-1') {
				// 		uni.removeStorageSync('JPinTuan');
				// 	} else if (orderID == '-2') {
				// 		var TuanIDstr = '-2';
				// 		uni.setStorageSync('JPinTuan', TuanIDstr)
				// 	} else {
				// 		var TuanIDstr = that.ids + '||' + orderID;
				// 		uni.setStorageSync('JPinTuan', TuanIDstr)
				// 	}
				// 	uni.removeStorageSync('JTuanState');
				// } catch (e) {
				// 	// error
				// }
				uni.navigateTo({
					url: '/pages/order/createOrder?type=2&id=' + that.ids + '&optionid=0&total=' + that.wunumber
				});
			}
		} else if (that.ok == '加入购物车') {
			if (that.wunumber <= 0) {
				uni.showModal({
					content: '您最少购买1件',
					showCancel: false
				})
				return;
			}
			that.$axios('Cart/add', "POST", 'shop', {
				optionid: 0,
				total: that.wunumber,
				id: that.ids
			}).then(res => {
				if (res.data.code == 200) {
					uni.showToast({
						title: '添加成功',
						icon: "none",
						duration: 2000
					});
					that.clear();
				} else {
					uni.showModal({
						content: res.data.data.message,
						showCancel: false
					})
				}
			})
		} else if (that.ok == '完成') {
			that.clear();
		} else if (that.ok == '已售罄') {
			uni.showToast({
				title: '已售罄',
				icon: "none",
				duration: 2000
			});
		}
	}
	// 有规格
	function yousuccess(that) {
		that.ok = that.youshop.stock <= 0 ? '已售罄' : that.oks;
		if (that.ok == '立即购买') {
			uni.showModal({
				title: '提示',
				content: '您选择的规格是：' + that.youshop.title,
				success(res) {
					if (res.cancel) {
						return;
					}
					if (that.younumber - 0 > that.youshop.stock) {
						uni.showModal({
							content: '您最多购买' + that.youshop.stock + '件',
							showCancel: false
						})
						return;
					}
					if (that.younumber <= 0) {
						uni.showModal({
							content: '您最少购买1件',
							showCancel: false
						})
						return;
					}
					// try {
					// 	var orderID = uni.getStorageSync('JTuanState');
					// 	if (orderID == '-1') {
					// 		uni.removeStorageSync('JPinTuan');
					// 	} else if (orderID == '-2') {
					// 		var TuanIDstr = '-2';
					// 		uni.setStorageSync('JPinTuan', TuanIDstr)
					// 	} else {
					// 		var TuanIDstr = that.ids + '||' + orderID;
					// 		uni.setStorageSync('JPinTuan', TuanIDstr)
					// 	}
					// 	uni.removeStorageSync('JTuanState');
					// } catch (e) {
					// 	// error
					// }
					uni.navigateTo({
						url: '/pages/order/createOrder?type=2&id=' + that.ids + '&optionid=' + that.youshop
							.id + '&total=' + that.younumber
					});
				}
			})

		} else if (that.ok == '加入购物车') {
			uni.showModal({
				title: '提示',
				content: '您选择的规格是：' + that.youshop.title,
				success(res) {
					if (res.confirm) {
						if (that.younumber <= 0) {
							uni.showModal({
								content: '您最少购买1件',
								showCancel: false
							})
							return;
						}
						that.$axios('Cart/add', "POST", 'shop', {
							optionid: that.youshop.id,
							total: that.younumber,
							id: that.ids
						}).then(res => {
							if (res.data.code == 200) {
								that.clear();
								uni.showToast({
									title: '添加成功',
									icon: "none",
									duration: 2000
								});
							} else {
								uni.showModal({
									content: res.data.data.message,
									showCancel: false
								})
							}
						})
					}
				}
			})

		} else if (that.ok == '已售罄') {
			uni.showToast({
				title: '已售罄',
				icon: "none",
				duration: 2000
			});
		} else if (that.ok == '完成') {
			that.clear();
		}
	}
</script>

<style lang="scss">
	.pop-wp {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 800;
	}

	.pop-nr {
		width: 100%;
		background-color: #fff;
		padding-bottom: 80upx;
		position: absolute;
		bottom: 0;
		font-size: 28upx;
		color: #333;
		border-radius: 10upx;
		z-index: 1001;
	}

	.title {
		height: 200upx;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		border-bottom: 1upx rgba(0, 0, 0, 0.2) solid;
	}

	.title image {
		width: 200upx;
		height: 200upx;
		position: relative;
		top: -20upx;
		margin: 0 30upx;
		border: 1px rgba(0, 0, 0, 0.2) solid;
	}

	.title view {
		flex: 1;
		color: #333;
		font-size: 24upx;
	}

	.title view .jiage {
		font-size: 28upx;
	}

	.title view .jiage,
	.title view .kucun {
		color: #fa436a;
		margin: 20upx 0;
	}

	.title view .kucun {
		color: #C0C4CC;
	}

	.guige-chima,
	.number {
		padding: 16upx 30upx 0;
		font-size: 26upx;
	}

	.guige-chima-titlt {
		font-size: 32upx;
	}

	.guige-chima-titlt-xuanze {
		width: 100%;
		margin: 10upx 0;
		padding: 10upx 0 10upx;
	}

	.guige-chima-titlt-xuanze view {
		display: inline-block;
		padding: 10upx 20upx;
		background-color: rgba(12, 12, 12, 0.1);
		margin: 0 0 20upx 20upx;
		border-radius: 35upx;
		box-sizing: border-box;
		border: 1upx #fff solid;
	}

	.guige-chima-titlt-xuanze .hui {
		color: #999;
	}

	.guige-chima-titlt-xuanze .xuan {
		background-color: rgba(250, 67, 106, 0.1);
		color: #fa436a;
	}

	.number {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20upx;
	}

	.number-right {
		width: 200upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.number-right view,
	.number-right input {
		flex: 1;
		text-align: center;
		background-color: #DCDFE6;
		line-height: 40upx;
	}

	.number-right input {
		margin: 0 10upx;
	}

	.btn {
		/* background-color: #fa436a; */
		background-color: $bg-color;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #fff;
		width: 80%;
		margin: 20upx auto;
		border-radius: 30upx;
	}

	.chahao {
		font-size: 28upx;
		color: #C0C4CC;
		border: 1px #C0C4CC solid;
		width: 40upx;
		line-height: 40upx;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		top: 20upx;
		right: 20upx;
	}

	.xuan-guige {
		max-height: 420upx;
	}

	.shop-blck {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 0;
		left: 0;
		top: 0;
	}
</style>
